<template>
  <div class="main">
    <div class="main-bg">
      <h1>拾记博客</h1>
      <span class="typed" data-text="|"></span>
    </div>
    <el-row
      type="flex"
      justify="center"
      :gutter="10"
      style="margin-left: 0; margin-right: 0"
    >
      <el-col :xs="24" :lg="15" :md="17" :sm="22">
        <bigitem
          v-for="(item, i) in articlelist"
          :key="i"
          class="hidden-xs-only bigitem"
          :item="item"
        ></bigitem>
        <Xsitem
          v-for="(item, i) in articlelist"
          :key="'y' + i"
          :item="item"
          class="xs-show hidden-xs-and-up"
        ></Xsitem>
        <!-- 分页 -->
        <el-card class="card" v-if="total > 10">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page="pagesize"
          >
          </el-pagination>
        </el-card>
      </el-col>
      <el-col :lg="5" :md="6" class="rightbox hidden-sm-and-down">
        <div class="box">
          <introduction
            :num3="tags.length"
            :num1="total"
            :num2="classnum"
          ></introduction>
          <div class="span card">
            <div class="title">标签云</div>
            <div class="box">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              ></svg>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Bigitem from "../../components/Bigitem.vue";
import Introduction from "../../components/introduction.vue";
import Xsitem from "../../components/xsitem.vue";
import { getArticle, getTagAll } from "@/api";
import tags from '@/utils/tags.js'
import { mapState } from "vuex";
export default {
  components: { Bigitem, Xsitem, Introduction },
  data() {
    return {
      articlelist: [],
      page: 1,
      total: 0,
      classnum: 0,
    };
  },
  async mounted() {
    this.typed();
    if (this.tags.length>0){
      tags(this.tags);
    }
  },
  async created() {
    await this.getArticle();
    // await this.getclass();
  },
  methods: {
    typed() {
      var span = document.querySelector(".typed");
      var string = ["人生有味是清欢", "拾初心，记时光"];
      var i = 0;
      var j = 0;

      var timer = setInterval(() => {
        // if()
        if (
          (j >= string[i].length && span.innerText === "") ||
          (j >= string[i].length && !string[i + 1])
        ) {
          i++;
          j = 0;
          if (i >= string.length) {
            span.setAttribute("data-text", "");
            clearInterval(timer);
          }
          return;
        }
        if (j >= string[i].length && span.innerText != "" && string[i + 1]) {
          span.innerText = span.innerText.substring(
            0,
            span.innerText.length - 1
          );
          return;
        }
        if (j < string[i].length) {
          span.innerText += string[i][j];
          j++;
        }
      }, 500);
    },
    //请求文章列表
    async getArticle() {
     const data = await getArticle({ page:this.page,sortby:"is_top",isAsc:false });
     this.total = data.total
      this.articlelist = data.list;
      console.log(data);
    },
    handleCurrentChange(newsize) {
      this.page = newsize;
      this.getArticle();
    },
    //请求分类数量
    async getclass() {
      const { data } = await this.axios.get("/class/num");
      this.classnum = data.data;
    },
  },
  computed:mapState({
    tags:state=>state.tags
  }),watch:{
    tags(val){
      if (val.length>0){
        tags(this.tags);

      }
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  .main-bg {
    height: 100vh;
    background: url("/image/index.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h1 {
      font-size: 40px;
      font-weight: 900;
      color: var(--font-white);
    }
    span {
      // width: 300px;
      text-align: center;
      color: var(--font-white);
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      position: relative;
      &::before {
        display: block;
        content: attr(data-text);
        color: #fff;
        position: absolute;
        top: 0;
        right: -5px;
        animation: flicker 1s ease-in infinite;
      }
    }
  }
}
.bigitem {
  &:nth-child {
    margin-bottom: 0;
  }
  margin-bottom: 10px;
}
.el-row {
  padding: 30px;
}
.rightbox {
  .box {
    position: sticky;
    top: 70px;
    .span {
      margin-top: 10px;
      padding: 20px;
      .box {
        width: 100%;
        height: 230px;
      }
      // width: ;
    }
  }
}

@keyframes flicker {
  50% {
    opacity: 0;
  }
}
@media screen and (max-width: 992px) {
  .el-row {
    padding: 30px 10px !important;
  }
}
@media screen and (max-width: 768px) {
  .xs-show {
    display: block !important;
  }
}
@media screen and (min-width: 768px) {
  .hidden-xs-and-up {
    display: none !important;
  }
}
</style>
